<template>
	<view :class="[isDark?'dark':'', AppStyle]" :style="{'background-color':isDark?'#1c1c1c':'#f6f6f6','min-height':isDark?'100vh':'auto'}">
		<view class="header" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar" :style="{'height': CustomBar + 'px','padding-top':StatusBar + 'px', 'background-color':isDark?'#1c1c1c':'#ffffff'}">
				<view class="action" @tap="back">
					<text class="cuIcon-back" :style="{'color':isDark?'#ffffff':'#000000'}"></text>
				</view>
				<view class="content text-bold" :style="[{top:StatusBar + 'px'}, {'color':isDark?'#ffffff':'#000000'}]">
					{{$t('user.agreement.useragreement')}}
				</view>
			</view>
		</view>
		<scroll-view scroll-y class="agreement" :style="{'background-color':isDark?'#1c1c1c':'#ffffff', 'color':isDark?'#ffffff':'#000000'}">
			<view class="agreement-title" :style="{'color':isDark?'#ffffff':'#000000'}">{{$t('user.agreement.about1')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{appname + $t('user.agreement.about2')}}</view>
			<view class="agreement-title" :style="{'color':isDark?'#ffffff':'#000000'}">{{$t('user.agreement.about3')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about4') + appname + $t('user.agreement.about5') + appname + $t('user.agreement.about6')}}</view>
			<view class="agreement-title" :style="{'color':isDark?'#ffffff':'#000000'}">{{$t('user.agreement.about7')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about8')}}</view>
			<view class="agreement-title" :style="{'color':isDark?'#ffffff':'#000000'}">{{$t('user.agreement.about9')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about10')}}</view>
			<view class="agreement-title" :style="{'color':isDark?'#ffffff':'#000000'}">{{$t('user.agreement.about11')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about12') + appname + $t('user.agreement.about13') + appname + $t('user.agreement.about14')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about15') + appname + $t('user.agreement.about16') + appname + $t('user.agreement.about17') + appname + $t('user.agreement.about18')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about19') + appname + $t('user.agreement.about20') + appname + $t('user.agreement.about21') + appname + $t('user.agreement.about22') + appname + $t('user.agreement.about23') + appname + $t('user.agreement.about24')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about25')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about26') + appname + $t('user.agreement.about27') + appname + $t('user.agreement.about28') + appname + $t('user.agreement.about29')}}</view>
			<view class="agreement-title" :style="{'color':isDark?'#ffffff':'#000000'}">{{$('user.agreement.about30')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about31')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about32') + appname + $t('user.agreement.about33')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about34')}}</view>
			<view class="agreement-title" :style="{'color':isDark?'#ffffff':'#000000'}">{{$t('user.agreement.about35')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about36')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about37')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about371') + appname + $t('user.agreement.about372') + appname + $t('user.agreement.about373') + appname + $t('user.agreement.about374')}}</view>
			<view class="agreement-title" :style="{'color':isDark?'#ffffff':'#000000'}">{{$t('user.agreement.about38')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about39') + appname + $t('user.agreement.about40')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about41')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about42')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about43')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about44')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about45')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about46')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about47')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about48')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about49')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about50')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about51')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about52')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about53') + appname + $t('user.agreement.about54')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about55')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about56')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about57')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about58')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about59')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about60') + appname + $t('user.agreement.about61') + appname + $t('user.agreement.about62') + appname + $t('user.agreement.about63') + appname + $t('user.agreement.about64') + appname + $t('user.agreement.about65') + appname + $t('user.agreement.about66') + appname + $t('user.agreement.about67') + appname + $t('user.agreement.about68')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about69')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about70') + appname + $t('user.agreement.about71') + appname + $t('user.agreement.about72') + appname + $t('user.agreement.about73')}}</view>
			<view class="agreement-title" :style="{'color':isDark?'#ffffff':'#000000'}">{{$t('user.agreement.about74')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about75') + appname + $t('user.agreement.about76') + appname + $t('user.agreement.about77')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about78')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about79') + appname + $t('user.agreement.about80') + appname + $t('user.agreement.about81')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about82') + appname + $t('user.agreement.about83') + appname + $t('user.agreement.about84')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about85')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about86')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about87')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about88')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about89')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about90')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about91')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about92')}}</view>
			<view class="agreement-title" :style="{'color':isDark?'#ffffff':'#000000'}">{{$t('user.agreement.about93')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about94') + appname + $t('user.agreement.about95') + appname + $t('user.agreement.about96') + appname + $t('user.agreement.about97') + appname + $t('user.agreement.about98')}}</view>
			<view class="agreement-title" :style="{'color':isDark?'#ffffff':'#000000'}">{{$t('user.agreement.about99')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about100') + appname + $t('user.agreement.about101') + appname + $t('user.agreement.about102') + appname + $t('user.agreement.about103')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about104') + appname + $t('user.agreement.about105') + appname + $t('user.agreement.about106')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about107') + appname + $t('user.agreement.about108')}}</view>
			<view class="agreement-title" :style="{'color':isDark?'#ffffff':'#000000'}">{{$t('user.agreement.about109')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about110') + appname + $t('user.agreement.about111')}}</view>
			<view class="agreement-title" :style="{'color':isDark?'#ffffff':'#000000'}">{{$t('user.agreement.about112')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about113')}}</view>
			<view class="agreement-text" :style="{'color':isDark?'#cccccc':'#666666'}">{{$t('user.agreement.about114') + email}}</view>
			<view style="height:100px;"></view>
		</scroll-view>
		<view class="bottom-buttons" v-if="buttonShow" :style="{'background-color':isDark?'#1c1c1c':'#fff'}">  
		    <view class="button1" @tap="agree">{{$t('global.agree')}}</view>  
		    <view class="button2" @tap="disagree" :style="{'background-color':isDark?'#1c1c1c':'#ffffff', 'border':isDark?'2px solid #00BCD4':'2px solid #00BCD4', 'color':isDark?'#00BCD4':'#00BCD4'}">{{$t('global.disagree')}}</view>  
		</view>  
	</view>
</template>

<script>
	import darkModeMixin from '@/utils/darkModeMixin.js'
	import { localStorage } from '../../js_sdk/mp-storage/mp-storage/index.js'
	export default {
		mixins: [darkModeMixin],
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				NavBar:this.StatusBar +  this.CustomBar,
				AppStyle:this.$store.state.AppStyle,
				
				uid:0,
				name:'',
				screenName:'',
				password:'',
				repassword:'',
				mail:'',
				url:'',
				buttonShow:true,
				appname:"",
				email:"",
				
				token:''
				
			}
		},
		onPullDownRefresh(){
			var that = this;
			
		},
		onShow(){
			var that = this;
			// #ifdef APP-PLUS
			
			//plus.navigator.setStatusBarStyle("dark")
			// #endif
			that.appname = that.$API.GetAppName();
			that.email = that.$API.GetAppEmail();
		},
		onLoad(res) {
			var that = this;
			// #ifdef APP-PLUS || MP
			that.NavBar = that.CustomBar;
			// #endif
			if(res.button=="none"){
				that.buttonShow = false
			}
		},
		methods: {
			agree(){
				var that = this;
				localStorage.setItem('isAgree', 'true');
				that.back()
			},
			disagree(){
				var that = this;
				localStorage.setItem('isAgree', 'false');
				that.back()
				uni.showToast({
					title: that.$t('user.agreement.agreeregister'),
					icon: 'none',
					duration: 3000,
					position: 'center',
				});
			},
			back(){
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style>
	.bottom-buttons {  
	  position: fixed;  
	  bottom: 0;  
	  width: 100%;  
	  display: flex;  
	  justify-content: space-between;  
	  padding: 10px;  
	  background-color: #fff;
	  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); 
	}  
	  
	.bottom-buttons .button1 {  
	  flex: 1;  
	  text-align: center;  
	  padding: 8px;  
	  margin: 0 20px;
	  border-radius: 30px;
      background-color: #00BCD4;
	  color: #fff;  
	  font-size: 16px;  
	}  
	.bottom-buttons .button2 {
	  flex: 1;  
	  text-align: center;  
	  padding: 8px;  
	  margin: 0 20px;
	  border-radius: 30px;
	  background-color: #ffffff;
	  border: 2px solid #00BCD4;
	  color: #00BCD4;  
	  font-size: 16px;  
	}  
	  
	.bottom-buttons .button:not(:last-child) {  
	  margin-right: 20px;
	}
</style>
